<template>
  <div>
    <!-- 详情 -->
    <div class="layout-container-detail">
      <div class="detail-page-name"> <span @click="goProjectMs">团队管理</span> / 团队详情</div>
      <div class="detail-page-title">
        <div class="detail-page-title-top">
          <div class="detail-title">{{ projectDetailInfo.user_name }}</div>
          <div class="detail-sort" style="margin-right:10px">{{ projectDetailInfo.now_month }}</div>
          <div class="detail-sort">排序值：{{ projectDetailInfo.Id }}</div>
        </div>
        <!-- 子管理员没有权限 -->
        <div v-if="adminInfo.admin_type === 0">
          <el-button v-if="projectDetailInfo.status !== 1" type="primary"
            @click="handleOptStatus(projectDetailInfo.status)">上线</el-button>
          <el-button v-else type="primary" @click="handleOptStatus(projectDetailInfo.status)">下线</el-button>
        </div>
      </div>
      <div>
        <el-row class="el-row-item">
          <el-col :span="8">用户ID：{{ projectDetailInfo.user_id }}</el-col>
          <el-col :span="8">本月团队等级：{{ projectDetailInfo.level }}</el-col>
          <el-col :span="8">团长专属链接：{{ projectDetailInfo.team_user_url }} 
            <el-icon v-copy="projectDetailInfo.team_user_url"  color="#409eff" class="cup">
              <DocumentCopy /></el-icon>
          </el-col>
          <el-col :span="8">团队编号：{{projectDetailInfo.team_number}}</el-col>
          <el-col :span="8">上月团队等级：{{projectDetailInfo.last_month_level}}</el-col>
          <el-col :span="8">团队本月总收入：{{ projectDetailInfo.team_income }}</el-col>
          <el-col :span="8">本月邀请总人数：</el-col>
          <el-col :span="8">历史月份人数与等级：
            <el-popover placement="bottom" trigger="hover"  @show="getHistoryPeopleLevel()">
              <div slot="content" style="min-width:400px">
                  <div v-for="(el, i) in historyPeopleLevelArr" :key="i">
                     {{el}}
                  </div>
              </div>
              <template #reference>
                 <el-button type="text">查看</el-button>
              </template>
            </el-popover>
          </el-col>
          <el-col :span="8">状态：{{projectDetailInfo.statusName}} 
             <!-- v-if="adminInfo.admin_type === 0" -->
                <el-button @click="changeUserStatus(3)" v-if="projectDetailInfo.status == 1" type="text">离职</el-button>
                <el-button @click="changeUserStatus(2)" v-if="projectDetailInfo.status == 0" type="text">入职</el-button>
                <el-button type="text">合并删除</el-button>
          </el-col>
          <el-col :span="8">本月有效邀请进度：{{projectDetailInfo.now_invite_progress}}</el-col>
          <el-col :span="8">历史总有效人数：{{ projectDetailInfo.team_people_history }}</el-col>
          <el-col :span="8">成员团队权限：{{ projectDetailInfo.team_permissions ==''?'默认':projectDetailInfo.team_permissions }}</el-col>
        </el-row>
      </div>
    </div>
    <div class="layout-container">
      <div class="layout-container-form" style="flex-direction: column">
        <!-- <div class="layout-container-form-title">题库</div> -->
        <div class="layout-container-form-search">
          <el-row style="text-align: left">
            <el-col :span="24">
              <el-form label-width="90px" :inline="true">
                <el-form-item label="姓名：">
                  <el-input v-model="query.real_name" placeholder="请输入用户姓名" style="width: 100%" clearable
                    @clear="getTableData(true)" @keyup.enter="getTableData(true)"></el-input>
                </el-form-item>
                 <el-form-item label="最后一次收入芝草：" >
                  <div class="el-form-item-flexstart">
                    <el-input v-model="query.amount_from" placeholder="请输入数量" style="width: 100%" clearable
                      @clear="getTableData(true)" @keyup.enter="getTableData(true)"></el-input>
                    <span style="width:100px;text-align:center">至</span>
                    <el-input v-model="query.amount_to" placeholder="请输入数量" style="width: 100%" clearable
                    @clear="getTableData(true)" @keyup.enter="getTableData(true)"></el-input>
                  </div>
                </el-form-item>
                <el-form-item label="权限查询：">
                  <el-input v-model="query.auth" placeholder="请输入项目ID" style="width: 100%" clearable
                    @clear="getTableData(true)" @keyup.enter="getTableData(true)"></el-input>
                </el-form-item>

                <el-form-item label="收入日期：">
                  <el-date-picker v-model="query.last_balance" type="daterange" prefix-icon="el-icon-date"
                    range-separator="→" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                    start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%" @change="changeEffectiveTime" />
                </el-form-item>
                <el-form-item label="用户ID：">
                  <el-input v-model="query.user_id" placeholder="请输入用户ID" style="width: 100%"
                    @clear="getTableData(true)" @keyup.enter="getTableData(true)" clearable></el-input>
                </el-form-item>
                <el-form-item label="当前剩余芝草：" >
                  <div class="el-form-item-flexstart">
                    <el-input v-model="query.balance_from" placeholder="请输入数量" style="width: 100%" clearable
                      @clear="getTableData(true)" @keyup.enter="getTableData(true)"></el-input>
                    <span style="width:100px;text-align:center">至</span>
                    <el-input v-model="query.balance_to" placeholder="请输入数量" style="width: 100%" clearable
                    @clear="getTableData(true)" @keyup.enter="getTableData(true)"></el-input>
                  </div>
                </el-form-item>
                <el-form-item label="入团时间：">
                  <el-date-picker v-model="query.created_at" type="daterange" prefix-icon="el-icon-date"
                    range-separator="→" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                    start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%" @change="changeFinishTime" />
                </el-form-item>
                <el-form-item>
                  <el-button class="search-btn" style="margin-left: 8px" @click="resetSearch">{{
                      $t("message.common.reset")
                  }}</el-button>
                  <el-button type="primary" class="search-btn" @click="getTableData(true)">{{
                      $t("message.common.search")
                  }}</el-button>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </div>
        <div class="layout-container-opt" style="padding: 5px 15px !important;">
             <div style="padding:0 20px 0 3px">
                <el-checkbox v-model="checkAll" label="1" @change="changeAll">全选</el-checkbox>
            </div>
            <el-button
                v-if="adminInfo.admin_type < 2 || (adminInfo.admin_type === 2 && adminInfo.action_permissions.includes('3'))"
                type='primary' :disabled="selectTopicData.length != 0"
                :loading="exportBatchLoading" @click="exportExcelPost">
                导出每次收入数据
              </el-button>
              <el-button
                v-if="adminInfo.admin_type < 2 || (adminInfo.admin_type === 2 && adminInfo.action_permissions.includes('3'))"
                :type="'primary'" 
                :loading="exportLoading" @click="exportExcelAllFun">
                导出累计数据
              </el-button>
              <el-button v-if="adminInfo.admin_type < 2" :type=" 'primary' "
                 @click="refreshRanking">
                强制刷新排行榜数据
              </el-button>
        </div>
      </div>
      <div class="layout-container-table">
        <Table ref="table" v-model:page="page" v-loading="loading" :showSelection="true" :data="tableData"
          :showIndex="false" @getTableData="getTableData" @selection-change="handleSelectionChange">
           <el-table-column 
            v-for="(item,index) in columns" :type="item.type" :key="index"
            :label="item.label"
            :width="item.width"
            :property="item.property">
                <template #default="scope" v-if="item.input">
                    <el-input v-model="scope.row.dict_number" placeholder="" />
                </template>
                <template #default="scope" v-else-if="item.copy">
                    <span>{{scope.row[item.property]}} '
                        <el-icon class="cup" v-copy="scope.row[item.property]"  color="#409eff"><DocumentCopy /></el-icon>
                    </span>
                </template>
                <template #default="scope" v-else-if="item.tooltip">
                    <el-popover
                        placement="left-start"
                        @show="(()=>{getHistoryPeopleLevel(scope.row)})"
                        width="300px"
                        :disabled="item.property == 'team_permissions' && scope.row[item.property] ==''?true:false"
                        trigger="hover">
                        <div slot="content">
                            <template v-if="item.property == 'SystemUserRestrictionName'">
                                <div v-for="(el, i) in scope.row.SystemUserRestriction" :key="i">
                                   {{el.project_id}}、{{el.limit}}题；{{el.lower_limit}}题；{{el.cd}}秒；{{el.day_limit}}题；{{el.day_give_up_limit}}题；
                                </div>
                            </template>
                            <template v-if="item.property == 'remark'">
                                {{scope.row[item.property]}}
                            </template>
                            
                        </div>
                        <template #reference>
                             <template v-if="item.property == 'team_permissions'">
                                <span v-if="scope.row[item.property] == ''">所有项目</span>
                                <el-button v-else type="text">详情</el-button>
                            </template>
                            <el-button v-else type="text">{{ '详情'}}</el-button>
                        </template>
                    </el-popover>
                </template>
                <template  #default="scope" v-else>
                    <template v-if="item.property">
                        <el-input
                            v-if="scope.row.showInput" 
                            v-model="scope.row[item.property]" 
                            placeholder="" />
                        <span v-else>{{scope.row[item.property]}}</span>
                    </template>
                </template>
                
            </el-table-column>
        </Table>
      </div>
      <!-- 批量导入弹出框 -->
      <!-- 上传文件弹出框组件 -->
      <BatchImportDialog v-if="uploadObj.visible" :visible="uploadObj.visible" :title="uploadObj.title"
        :uploadObj="uploadObj" @closeUploadDialog="closeUploadDialog" @refreshTable="refreshTable" />
      <!-- 项目提示设置 -->
      <!-- <ProjectPrompt v-if="dialogPromptData.visible" :visible="dialogPromptData.visible" :title="dialogPromptData.title"
        :dialogInfo="dialogInfo" @closePromptDialog="closePromptDialog" /> -->
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent} from "vue";
import Copy from '@/directive/copy'
  export default defineComponent({
    directives: {
      Copy
    },
  
    setup(props) {
    }
  })
</script>
<script setup lang="ts">
import {
  DocumentCopy
} from '@element-plus/icons-vue'


import { dateFormat, prefix, ossPrefix } from "@/utils/index.ts";
import { ref, reactive } from "vue";
import { Page } from "@/components/table/type";
import { ElMessage, ElMessageBox } from "element-plus";
import Table from "@/components/table/index.vue";
import BatchImportDialog from "@/components/uploadFile/batchImportDialog.vue";
import { teamInfo,historyPeopleLevel,teamManagePage,teamMemberIncomeByCount,teamMemberIncomeBySum,teamEdit } from "@/api/team";
// import { getProjectList, delProject, changeProjectStatus } from "@/api/service/project.ts";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";

const router = useRouter();
const store = useStore();
const route = useRoute()
const projectDetailInfo = ref({});
// console.log(projectDetailInfo);

const getTeamInfo = ()=> {
  teamInfo({user_id:route.query.user_id || 'ZXZzxz00000013'}).then((res:any) => {
    if(res.code == 200){
      query.team_number = res.data.team_number
      res.data.team_user_url = 'www.zhaixiaozhi.com/backstagerpzzm/' + res.data.user_id
      res.data.statusName = res.data.status == 0?'已离职':'任职中'
      projectDetailInfo.value = res.data
      getTableData(true)
    }
  })
}
getTeamInfo()

const historyPeopleLevelArr = ref([]);
const getHistoryPeopleLevel = ()=>{
    console.log('sdfds')
    historyPeopleLevel({id:projectDetailInfo.value.Id}).then(res => {
        if(res.code == 200){
            historyPeopleLevelArr.value =res.data.list 
        }else{
            ElMessage.success(res.message);
        }
    })
}
// 面包屑导航
const goProjectMs = () => {
  router.push({
    path: '/backstagerpzzm/teamManage/teamList'
  })
}


const changeUserStatus = (type:Number) => {
  let row = projectDetailInfo.value
  ElMessageBox.confirm(`是否确认当前操作?`, "", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "success",
  })
    .then(() => {
      // 详情
      debugger
      let par = {
        id:row.Id,
      }
     if(type == 2){// 入职
        par.status = 1;
        
      }else if(type == 3){// 离职
         par.status = 0;
      }else if(type == 4){// 删除
        
      }
      setProfileUdate(par,row)
    })
    .catch(() => { });
};

const setProfileUdate = (par:any,row:Object)=> {
    teamEdit(par).then(res => {
        if(res.code == 200){
            debugger
            ElMessage.success('操作成功！');
            projectDetailInfo.value.status = par.status
            projectDetailInfo.value.statusName = par.status == 0?'已离职':'任职中'
        }else{index
           ElMessage.success(res.message);
        }
    })
}


const adminInfo = reactive(store.state.user.adminInfo);
const dialogInfo = reactive({
  id: projectDetailInfo.Id,
  content: projectDetailInfo.hint,
});

// 操作
const handleOptStatus = (status: String) => {
  ElMessageBox.confirm(`是否确认当前操作?`, "", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "success",
  })
    .then(() => {
      // 项目下线或上线
      changeProjectStatusFun(status);
    })
    .catch(() => { });
};

// 修改项目状态
const changeProjectStatusFun = (status: any) => {
  // status => 0:未上线 1:已上线 2:已线下
  let data = {
    id: projectDetailInfo.Id,
    status: status === 1 ? 2 : 1,
  };
  changeProjectStatus(data).then((res: any) => {
    if (res.code === 200) {
      let msg = status === 1 ? "下线成功" : "上线成功";
      ElMessage.success(msg);
      let info = JSON.parse(JSON.stringify(projectDetailInfo));
      info.status = status === 1 ? 2 : 1;
      store.commit("user/projectDetailInfoChange", info);
      projectDetailInfo.status = info.status;
    }
  });
};
// 存储搜索用的数据
const query = reactive({
  team_number:'',
  real_name:'',
  amount_from:'',
  amount_to:'',
  last_balance:[],
  user_id:'',
  balance_from:'', 
  balance_to:'',
  created_at:[],
  auth:'',
});

// 生效时间change事件
const changeEffectiveTime = (val: any) => {
  if (!val) {
    query.effective_time = [];
  }
  getTableData(true);
};
// 截止时间change事件
const changeEndDateTime = (val: any) => {
  if (!val) {
    query.end_date_time = [];
  }
  getTableData(true);
};
// 完成时间change事件
const changeFinishTime = (val: any) => {
  if (!val) {
    query.finish_time = [];
  }
  getTableData(true);
};
// 状态change事件
const changeStatus = (val: any) => {
  console.log(val);
  if (val === "") {
    query.status = undefined;
  }
  getTableData(true);
};

const columns = reactive([
    {
        label:'序号',
        property:'Id', 
        width:'55',
        
    },
    {
        label:'团长用户ID',
        property:'user_id',
    },{
        label:'团队成员姓名',
        property:'real_name',
    },{
        label:'昵称',
        property:'nick_name',
    },{
        label:'手机号',
        property:'phone',
    },{
        label:'邮箱',
        property:'email',
    },{
        label:'支付宝账号',
        property:'alipay_account',
    },{
        label:'最后收入日期',
        property:'last_balance_day',
    },{
        label:'最后一次收入芝草',
        property:'amount',
    },{
        label:'收入备注',
        property:'remark',
        tooltip:true,
    },{
        label:'入团日期',
        property:'created_at',
    },{
        label:'激活日期',
        property:'team_activation_date',
    },{
        label:'成员团队权限',
        property:'SystemUserRestrictionName',
        tooltip:true,
    },
]);


// 分页参数, 供table使用
const page: Page = reactive({
  index: 1,
  size: 50,
  total: 0,
});
// 重置
const resetSearch = () => {
  query.real_name = ''
  query.amount_from = ''
  query.amount_to = ''
  query.last_balance = []
  query.user_id = ''
  query.balance_from = ''
  query.balance_to = ''
  query.created_at = []
  getTableData(true);
};
const loading = ref(false);
const tableData = ref([]);
const getParams = ()=>{
  let par = {
    page: page.index,
    page_size: page.size,
    team_number:'',
    real_name:'',
    amount_from:'',
    amount_to:'',
    last_balance:[],
    user_id:'',
    balance_from:'',
    balance_to:'',
    created_at:[],
    ...query
    
  }
  Object.keys(par).map(item => {
    if(par[item] === ''){
      delete par[item]
    }
  })
  if(par.last_balance.length ){
    par.last_balance_start = par.last_balance[0]
    par.last_balance_end = par.last_balance[1]
  }
  if(par.created_at.length ){
      par.created_at_start = par.created_at[0]
      par.created_at_end = par.created_at[1]
  }
  delete par.last_balance
  delete par.created_at
  return par
}

// 获取表格数据
// params <init> Boolean ，默认为false，用于判断是否需要初始化分页
const getTableData = (init: Boolean) => {
  loading.value = true;
  if (init) {
    page.index = 1;
  }
  let params = getParams();
  teamManagePage(params)
    .then((res: any) => {
      let data = res.data.list;
      data.forEach((d: any) => {
        d.loading = false;
        d.created_at = dateFormat(d.created_at)
        d.last_balance_day = d.last_balance_day ? dateFormat(d.last_balance_day) : ''
        d.team_activation_date = d.team_activation_date && d.team_activation_date != '0001-01-01T00:00:00Z' ? dateFormat(d.team_activation_date) : ''
        d.SystemUserRestrictionName = '详情'
      });
      tableData.value = data;
      page.total = Number(res.data.count);
    })
    .catch(() => {
      tableData.value = [];
      page.index = 1;
      page.total = 0;
    })
    .finally(() => {
      loading.value = false;
    });
};

// 导出题目答案与表格
const exportBatchLoading = ref(false);

const exportExcelPost = (topic_ids: any, project_ids: any) => {
  let data = getParams()
  data.income_date_start = data.balance_from_start
  data.income_date_end = data.balance_from_end
  data.join_date_start = data.created_at_start
  data.join_date_end = data.created_at_end
  delete data.page_size;
  delete data.balance_from_start;
  delete data.balance_from_end;
  delete data.created_at_start;
  delete data.created_at_end;
  teamMemberIncomeByCount(data).then((res: any) => {
    if (res.code === 200) {
      exportBatchLoading.value = false;
      ElMessage.success('导出成功');
      window.open(res.data);
    }
  })
}
// 导出通用函数
const exportLoading = ref(false);// 导出通用函数
const exportExcelAllFun = () => {
  let data = getParams()
  data.income_date_start = data.balance_from_start
  data.income_date_end = data.balance_from_end
  data.join_date_start = data.created_at_start
  data.join_date_end = data.created_at_end
  delete data.page_size;
  delete data.balance_from_start;
  delete data.balance_from_end;
  delete data.created_at_start;
  delete data.created_at_end;
  teamMemberIncomeBySum(data).then((res: any) => {
    if (res.code === 200) {
      exportLoading.value = false;
      ElMessage.success('导出成功');
      window.open(res.data);
    }
  })
}



// 批量导入
const uploadObj = reactive({
  fileType: [".xls", ".xlsx"],
  accept: ".xls, .xlsx", // 文件上传类型
  multiple: false, // 是否支持多选
  visible: false,
  title: "",
  url: "", // 批量导入用户接口地址
  downloadObj: {
    name: "",
    url: "",
  },
});
// 批量处理
const handleBatchImport = (type: Number) => {
  uploadObj.visible = true;
  switch (type) {
    case 1:
      uploadObj.title = "批量导入新题目";
      uploadObj.url = `/admin/topic/excel/imports/${projectDetailInfo.project_id}`;
      uploadObj.downloadObj.name = "题目上传表.xlsx"; // excel模板名称
      uploadObj.downloadObj.url = `${ossPrefix}题目上传表.xlsx`; // excel模板下载地址
      break;
    case 2:
      uploadObj.title = "批量强制回归题库数据";
      uploadObj.url = `/admin/topic/excel/regression_question_bank/${projectDetailInfo.project_id}`;
      uploadObj.downloadObj.name = "批量回归题库表.xlsx"; // excel模板名称
      uploadObj.downloadObj.url = `${ossPrefix}批量回归题库表.xlsx`; // excel模板下载地址
      break;
    case 3:
      uploadObj.title = "批量指派返修题目";
      uploadObj.url = `/admin/topic/excel/repair/${projectDetailInfo.project_id}`;
      uploadObj.downloadObj.name = "批量返修表.xlsx"; // excel模板名称
      uploadObj.downloadObj.url = `${ossPrefix}批量返修表.xlsx`; // excel模板下载地址
      break;
    case 4:
      uploadObj.title = "批量指派新题目";
      uploadObj.url = `/admin/topic/excel/assign_user/${projectDetailInfo.project_id}`;
      uploadObj.downloadObj.name = "批量指派表.xlsx"; // excel模板名称
      uploadObj.downloadObj.url = `${ossPrefix}批量指派表.xlsx`; // excel模板下载地址
      break;
    case 5:
      uploadObj.title = "批量作废题目";
      uploadObj.url = `/admin/topic/excel/invalid/${projectDetailInfo.project_id}`;
      uploadObj.downloadObj.name = "批量作废.xlsx"; // excel模板名称
      uploadObj.downloadObj.url = `${ossPrefix}批量作废.xlsx`; // excel模板下载地址
      break;
    default:
      break;
  }

};
// 1:批量清空当前题目上传的答案；释放空间, 2:批量删除当前题目；释放空间
const batchClear = (type: Number) => {
  switch (type) {
    case 1:
      batchClearUploadDataFun();
      break;
    case 2:
      batchDelTopicDataFun();
      break;
    default:
      break;
  }
};

// 1:批量删除当前题目；释放空间,
const batchClearUploadDataFun = () => {
  let data = {
    project_id: projectDetailInfo.project_id,
    topic_ids: selectTopicData.value
  }
  batchClearUploadData(data).then((res: any) => {
    if (res.code === 200) {
      ElMessage.success('批量清空当前题目上传的答案释放空间成功!')
      getTableData(true)
    }
  })
};

const batchDelTopicDataFun = () => {
  let data = {
    project_id: projectDetailInfo.project_id,
    ids: selectIdsData.value
  }
  batchDelTopicData(data).then((res: any) => {
    if (res.code === 200) {
      ElMessage.success('批量删除当前题目释放空间成功！')
      getTableData(true)
    }
  })
};



// 关闭上传文件弹出框
const closeUploadDialog = () => {
  uploadObj.visible = false;
};

// 导入题目答题配置
// const handleBatchUpdate = () => {
//   uploadObj.visible = true;
//   uploadObj.title = "导入题目答题配置";
//   uploadObj.url = "/admin/project/excel/update";
//   uploadObj.downloadObj.name = ""; // excel模板名称
//   uploadObj.downloadObj.url = ""; // excel模板下载地址
// };
// 导入接口成功！
const refreshTable = () => {
  getTableData(true);
};

// 勾选数据
const selectTopicData = ref([]); // 题目id
const selectIdsData = ref([]); // 系统id
const selectProjectIdsData = ref([]); // 项目id
const handleSelectionChange = (data: any) => {
  selectTopicData.value = [];
  selectIdsData.value = [];
  selectProjectIdsData.value = [];
  data.forEach((item: Object) => {
    selectTopicData.value.push(item.topic_id);
    selectIdsData.value.push(item.Id);
    selectProjectIdsData.value.push(item.project_id);
  })
};




// 操作
const handleOpt = (row: any, type: String) => {
  // 题目详情 不需要二次弹框
  if (type === "detail") {
    store.commit("user/topicInfoChange", row);
    router.push({
      path: "/backstagerpzzm/projectEdit/projectEdit",
    });
    return;
  }
  ElMessageBox.confirm(`是否确认当前操作?`, "", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "success",
  })
    .then(() => {
      // 导出
      if (type === "export") {
        exportLoading.value = true
        let topic_ids = [row.Id]; // array[interger]
        let project_ids = [row.project_id]; // array[string]
        exportExcelPost(topic_ids, project_ids);
      }
      // 回归题库
      if (type === "return_questions") {
        changeTopicStatusFun(row, 5)
      }
      // 返修
      if (type === "repair") {
        changeTopicStatusFun(row, 4)
      }
      // 作废
      if (type === "invalid") {
        changeTopicStatusFun(row, 6)
      }
      if (type === "del") {
        deleteFun(row.Id);
      }
    })
    .catch(() => { });
};

// 回归题库,返修,作废
const changeTopicStatusFun = (row: any, status: Number) => {
  let data = {
    id: row.Id,
    status: status
  }
  changeTopicStatus(data).then((res: any) => {
    if (res.code === 200) {
      let msg = ''
      if (status === 5) {
        msg = '回归题库成功！'
      }
      if (status === 4) {
        msg = '返修成功！'
      }
      if (status === 6) {
        msg = '作废成功！'
      }
      ElMessage.success(msg);
      getTableData(true);
    }
  })
}

// 删除函数
const deleteFun = (id: any) => {
  let data = {
    id,
  };
  delTopic(data)
    .then((res: any) => {
      if (res.code == 200) {
        getTableData(false);
        ElMessage.success("删除成功！");
      } else {
        ElMessage.error("删除失败！");
      }
    })
    .catch(() => false);
};

</script>

<style lang="scss" scoped>
.layout-container {
  height: 1000px;
}

.layout-container-form {
  position: relative;
  .el-form-item{
    width: 25%;
  }
  .el-form-item-flexstart{
      display: flex;
      justify-content: flex-start;
      flex-wrap: nowrap;
  }
  .layout-container-form-title {
    border-bottom: 1px solid #eeeeee;
    padding: 20px;
    font-size: 18px;
    font-size: bold;
    text-align: left;
    margin-bottom: 20px;
  }
}

.layout-container-detail {
  text-align: left;
  background: #ffffff;
  padding: 20px;
  box-sizing: border-box;

  .detail-page-name {
    color: #9a9b9f;
    margin-bottom: 20px;

    span {
      cursor: pointer;
    }
  }

  .detail-page-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    .detail-page-title-top {
      display: flex;
      align-items: center;
    }

    .detail-title {
      font-size: 20px;
      font-weight: bold;
      margin-right: 10px;
      // max-width: 400px;

      overflow: hidden; //溢出内容隐藏
      text-overflow: ellipsis; //文本溢出部分用省略号表示
      display: -webkit-box; //特别显示模式
      -webkit-line-clamp: 2; //行数
      line-clamp: 2;
      -webkit-box-orient: vertical; //盒子中内容竖直排列
    }

    .detail-sort {
      font-size: 12px;
    }
  }

  .el-row-item {
    :deep(.el-col) {
      margin-bottom: 25px;
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #000000;
    }
  }
}

.layout-container-form-search {
  width: 100%;
  display: inline-block !important;
  justify-content: flex-start !important;
  padding: 0 20px;
  box-sizing: border-box;

  .search-btn {
    margin-right: 10px;
  }
}

.layout-container-opt {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 5px 20px;
}

.split-line {
  margin: 0 8px;
  color: #ccc;
}

.image-slot {
  width: 50px;
  height: 50px;
  background: #fafafa;
  color: #ccc;
  font-size: 12px;
  cursor: pointer;
}

.popperClass {
  background: #000000;
}

</style>
